<template>
	<div class="login-wrap">
	    <div class="ms-title">
			<span  style="font-size: 6vh;">车辆在途实时监控平台</span>

		</div>
	    <div class="ms-login">
	        <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="0px">
	            <el-form-item prop="username">
	                <el-input v-model="loginForm.username" placeholder="请输入用户名" icon="user" @keyup.enter.native="handleLogin">
	                    <template slot="prepend">用户</template>
	                </el-input>
	            </el-form-item>
	            <el-form-item prop="password">
	                <el-input type="password" placeholder="请输入密码" v-model="loginForm.password" icon="lock" @keyup.enter.native="handleLogin">
	                    <template slot="prepend">密码</template>
	                </el-input>
	            </el-form-item>
				<el-form-item prop="captcha" class="code-wape">
					<el-input v-model="loginForm.captcha" placeholder="请输入左侧图片验证码" @keyup.enter.native="handleLogin" class="code-input" clearable>
						<template slot="prepend">
							<img alt="图片验证码" title="看不清换一张" class="code-image" @click="getCaptcha" :src="captchaPath" ref="resetCodeImage">
						</template>
					</el-input>
				</el-form-item>
	            <div class="login-btn">
	                <el-button type="primary" @click="handleLogin" :loading="loading">登录</el-button>
	            </div>
				<el-form-item prop="rememberMe" class="rememberme-wape">
	                <!-- <el-checkbox v-model="isRememberMe">记住我</el-checkbox> -->
	            </el-form-item>
	        </el-form>
	    </div>
	</div>
</template>

<script>
import * as Tool from '@/utils/tool'
import * as $http from '@/api/login'
export default {
	name:'login',
	data (){
		return {
			loading:false,
			isRememberMe:true,
			captchaPath:'',
            loginForm: {
                username: '',
				password: '',
				uuid: '',
          		captcha: ''
            },
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
				]
				,
				captcha:[
					{required: true, message: '请输入验证码', trigger: 'blur'}
				]
            }
        };
	},
	created () {
      this.getCaptcha()
    },
	methods: {
    getCaptcha(){
      let _this = this;
      this.loginForm.uuid = Tool.getUUID()
      $http.getCodeKeySrc(this.loginForm.uuid).then(data => {
        _this.captchaPath = data;
      });
    },
		encode(val,times){
			if(times<=0){
				return val;
			}
			let res = val;
			for(let i=0;i<times;i++){
				res = Tool.Base64.encode(res);
			}
			return res;
		},
		handleLogin(){
			var _this = this;
			this.$refs.loginForm.validate((valid) => {
				if (valid) {
					this.loading = true
					let postData = {};
					postData.username = _this.encode(_this.loginForm.username,3);
					postData.password = _this.encode(_this.loginForm.password,3);
					postData.uuid = _this.loginForm.uuid;
					postData.captcha = _this.loginForm.captcha;

					this.$store.dispatch('LoginByUsername', postData).then((response) => {
						this.loading = false
						if(response.code == 0){
							let redirectTo = _this.$route.query.redirect || '/'
							_this.$router.push({ path: redirectTo })
						}else{
							_this.getCaptcha();
							_this.loginForm.captcha = '';
							_this.$message({
								showClose: true,
								message: '登录失败：'+response.msg,
								type: 'error'
							});
						}
					}).catch(() => {
						this.loading = false
					})

				} else {
					console.log('error submit!!')
					return false;
				}
			});
		}
	}
}
</script>

<style scoped>
.login-wrap {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height:300px;
	overflow-y: auto;
	background-color: #f5f7f9;
	background-image: url('~@/assets/login-imgs/loginbg.jpg');
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
}
.ms-title {
	position: absolute;
    top: 10vh;
    width: 100vw;
    text-align: center;
    font-size: 4vh;
	line-height: 6vh;
    color: #fff;
    font-weight: 500;

}
.ms-login {
	position: absolute;
	left: 50vw;
	top: 50vh;
	width: 390px;
	height: 330px;
	margin: 0;
	margin-left:-195px;
	margin-top: -25vh;
	padding: 40px;
	border-radius: 5px;
	background-color: rgba(255,255,255,0.8);
}
.code-image{
	height: 38px;
    width: 110px;
    line-height: 40px;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    cursor: pointer;
}
.login-btn {
	text-align: center;
}
.login-btn button {
	width: 100%;
	height: 36px;
}
.singup{
	background-color: #d9534f;
	display: inline;
	float:right;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
	border-radius: .25em;
	text-decoration: none;
	margin-top: 9px;
}
</style>
